<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;list-style: none;}
        .tab{margin: 100px auto;width: 500px;height: 500px;border: 1px solid red;}
        .tab_title a{
            width: 100px;height: 40px;float: left;line-height: 40px;background-color: aqua;text-align: center;text-decoration: none;
        }
        .tab_content{
            padding: 20px;
        }
        a.active{
            background-color: deeppink;
        }
        .tab_content .item{
            display: none;
        }
        .tab_content .show{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
        <!-- 选项卡标题 -->
        <div class="tab_title">
            <a href="#" class="active">中国</a>
            <a href="#">法国</a>
            <a href="#">英国</a>
            <a href="#">美国</a>
            <a href="#">俄罗斯</a>
        </div>
        <!-- 选项卡标题所对应内容 -->
        <div class="tab_content">
            <div class="item show">
                <ul>
                    <li>中国speak</li>
                    <li>中国speak</li>
                    <li>中国speak</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>法国speak</li>
                    <li>法国speak</li>
                    <li>法国speak</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>英国speak</li>
                    <li>英国speak</li>
                    <li>英国speak</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>美国speak</li>
                    <li>美国speak</li>
                    <li>美国speak</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>俄罗斯speak</li>
                    <li>俄罗斯speak</li>
                    <li>俄罗斯speak</li>
                </ul>
            </div>
        </div>
    </div> 
    <script>
        // tab选项卡分析:
        // 布局:
        // 1. 5个标题---全部可见
        // 2. 5个内容 --- 只有一个可见的 其他都是隐藏的
        // 3.标题和内容应该是一一对应的关系

        // 思路"
        // 1.当你点击的标题会有一个激活的状态 .active
        // 2.点当前标题显示当前的内容,其他都是隐藏的

        var titles=document.querySelectorAll('.tab_title a');
        // console.log(titles);
        var items=document.querySelectorAll('.tab_content .item');
        // console.log(items);

        titles.forEach(function(title,index){//标题,索引
            // console.log(title);
            // console.log(index);
            title.onclick=function(){//点击每一个标题
                //思路:点击任何一个标题之后,先清空所有的标题上面的类名,让所有的内容都消息,再给当前的点击的标题添加类名.让当前的这一项内容显示

                titles.forEach(function(t){//t就是标题
                    // console.log(t);
                    t.className="";
                })

                items.forEach(function(item){//item就是里面每一块的内容,每一块都让消息不见,去掉show
                    item.classList.remove('show');
                })
                
                // 当前点击的这一项要添加;类名
                title.classList.add('active');
                // console.log(items[2]);
                items[index].classList.add('show');
                //因为标题索引和内容的索引是一致的,index当前操作标题的索引
            }
            
        })
    </script>
</body>
</html>